<template>
	<view style="height: 100vh; background-color: #FFFFFF;">
		<u-navbar title-color="#FFFFFF" height="48" back-icon-color="#FFFFFF" :border-bottom="false" :is-fixed="true" title="测试页面"></u-navbar>
		<uc-content :loading="loading">
			<!--无数据列表页面-->
			<view v-if="testList.length<1" class="view-center">
				<u-empty  text="测试数据为空" mode="list"></u-empty>
			</view>
			<view v-else>
				<view class="list-item" v-for="(item,index) in testList" :key="index" @click="checkItem(item)">
					<view class="list-top">
						<view class="list-left">任务名称:{{ item.consignee }}</view>
						<view class="list-right">领取时间:{{ item.date }}</view>
					</view>
					<view class="list-center u-line-2">
						123454345678756475888867564657656534657645346576875654546578775645342456576434123456765432456765
					</view>
					<view class="list-bottom">
						<view></view>
						<view>2</view>
					</view>
				</view>
			</view>
		</uc-content>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				testList:[
					{
						id:1,
						consignee:"123",
						date:"2021-05-04"
					},
					{
						id:1,
						consignee:"123",
						date:"2021-05-04"
					}
				]
			}
		},
		methods: {
			checkItem(item){
				
			},
			back(){
				window.native.back()
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "../../../uview-ui/libs/css/style.components.scss";
.list-item {
	padding: 30rpx 40rpx;
	background-color: #fff;
	border-bottom: #999999 1px solid;
	.list-top {
		@include vue-flex;
		justify-content: space-between;
		align-items: center;
		.list-left{
			font-weight: bold;
			font-size: 34rpx;
		}
		.list-right {
			font-size: 30rpx;
			line-height: 34rpx;
			color: #999999;
		}
	}
	.list-center{
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}
	.list-bottom {
		display: flex;
		margin-top: 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
		color: #999999;
	}
}
</style>
